<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>数据项列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="shortcut icon" href="${ctx }/ico/favicon.ico">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- jqgrid-->
<link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">

<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/common.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="${ctx }/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link
	href="${ctx}/css/plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet" />
<!-- bootstrap-switch css -->
<link href="${ctx }/css/plugins/bootstrap-switch/bootstrap-switch.css"
	rel="stylesheet">
<style type="text/css">
.bootstrap-select:not ([class*="col-"] ):not ([class*="form-control"] ):not
	(.input-group-btn ){
	width: 10%;
	margin-right: 25px;
}

.ui-jqgrid .ui-jqgrid-bdiv table.table-bordered td {
	text-align: center;
}

.ui-jqgrid .ui-jqgrid-htable thead th div {
	text-align: center;
}
</style>
</head>
<body class="gray-bg">
	<div class="animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox ">
					<div class="ibox-content">
						<div class="row m-b-sm m-t-sm">
							<div class="col-md-11" style="width: 100%">
								<div class="input-group" style="width: 100%;">
									<div class="from-group">
										<label class="control-label">数据项</label> <select
											class="selectpicker" id="tabcnname" name="tabcnname"
											required="" aria-required="true">
											<option value="">--全部--</option>
											<c:forEach items="${item_list}" var="item">
												<option value="${item.item_name}">${item.item_name}</option>
											</c:forEach>
										</select> <label class="control-label">地市</label> <select
											class="selectpicker" id="areaname" name="areaname"
											required="" aria-required="true">
											<option value="">--全部--</option>
											<c:forEach items="${area_list}" var="area">
												<option value="${area.areaname}">${area.areaname}</option>
											</c:forEach>
										</select> <label class="control-label">业务系统</label> <select
											class="selectpicker" id="bizsys" name="bizsys" required=""
											aria-required="true">
											<option value="">--全部--</option>
											<c:forEach items="${dictlist}" var="dict">
												<option value="${dict.dictname}">${dict.dictname}</option>
											</c:forEach>
										</select> <label class="control-label">告警维度</label> <select
											class="selectpicker" id="alarmdesc" name="alarmdesc"
											required="" aria-required="true">
											<option value="">--全部--</option>
											<option value="1">完整性</option>
											<option value="2">一致性</option>
											<option value="3">准确性</option>
										</select>

										<button class="btn btn-success btn-outline commonbtn"
											type="button" id="h_search_btn">
											<i class="fa fa-search"></i> 查询
										</button>
										<button class="btn btn-success btn-outline commonbtn"
											type="button" id="h_export_btn">
											<i class="fa fa-reply"></i> 导出
										</button>
									</div>

								</div>
							</div>
						</div>
						<div class="jqGrid_wrapper">
							<table id="table_list"></table>
							<div id="pager_list"></div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal inmodal" id="exportExcelWin" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">导出表格</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="outExecls" name="outExecls"
						method="post" action="${ctx }/platform/exportAlarm">
						<input type="hidden" name="pk_scene_id" id="pk_scene_id"
							value="${pk_scene_id}"> <input type="hidden"
							name="reserved1" id="reserved1" value="${reserved1}"> <input
							type="hidden" name="alarmTime" id="alarmTime"
							value="${alarmTime}"> <input type="hidden"
							name="tabcnname" id="tabcnname1"> <input type="hidden"
							name="areaname" id="areaname1"> <input type="hidden"
							name="bizsys" id="bizsys1"> <input type="hidden"
							name="alarmdesc" id="alarmdesc1">
						<div class="form-group">
							<label class="col-sm-3 control-label">导出文件名称：</label>
							<div class="col-sm-8">
								<input id="export_detail_name" name="export_detail_name"
									class="form-control" required="" aria-required="true"
									type="text" value="" placeholder="请输入导出文件名称">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">
								<button id="submitExcel" class="btn btn-primary">保存</button>
								<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- Peity -->
	<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- jqGrid -->
	<script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>

	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>

	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>


	<!-- 自定义js -->
	<script src="${ctx }/js/content.js?v=1.0.0"></script>
	<!-- Sweet alert -->
	<script src="${ctx }/js/plugins/sweetalert/sweetalert.min.js"></script>
	<script
		src="${ctx}/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<!-- bootstrap-switch js -->
	<script src="${ctx }/js/plugins/bootstrap-switch/bootstrap-switch.js"></script>
	<script>
		$(document)
				.ready(
						function() {
							$.jgrid.defaults.styleUI = 'Bootstrap';

							//绑定表格数据
							$("#table_list")
									.jqGrid(
											{
												url : "${ctx }/platform/loadDataGrid?pk_scene_id=${pk_scene_id}&reserved1=${reserved1}&alarmTime=${alarmTime}",
												datatype : "json",
												//height : "calc(100% - 300px)",
												height : $(window).height() - 282,
												//width : 'calc(100%)',
												autowidth : true,
												shrinkToFit : true,
												multiselect : false,
												multiboxonly : true,
												rowList : [ 10, 20, 30 ],
												root : "rows",
												colNames : [ '主键ID', '地市',
														'业务系统', '数据项', '数据标识',
														'告警类别', '告警时间', '告警描述' ],
												colModel : [
														{
															name : 'id',
															index : 'id',
															hidden : true,
															algin : 'center'
														},
														{
															name : 'areaname',
															index : 'areaname',
															algin : 'center'
														},
														{
															name : 'bizsys',
															index : 'bizsys',
															algin : 'center'
														},
														{
															name : 'tabcnname',
															index : 'tabcnname',
															algin : 'center'
														},
														{
															name : 'remark',
															index : 'remark',
															algin : 'center'
														},
														{
															name : 'alarmdesc',
															index : 'alarmdesc',
															algin : 'center'
														},
														{
															name : 'stime',
															index : 'stime',
															algin : 'center',
															formatter : function(
																	cellvalue,
																	options,
																	rowObject) {
																if (cellvalue != null
																		&& cellvalue != "") {
																	return dateFormat(cellvalue);
																}
															}
														},
														{
															name : 'errdesc',
															index : 'errdesc',
															algin : 'center',
															/* formatter : function(
																	cellvalue,
																	options,
																	rowObject) {
																if (cellvalue != null
																		&& cellvalue != "") {
																	var v_s = eval("("
																			+ cellvalue
																			+ ")");
																	var m = v_s.correct.CCRQ;
																	return m;
																}
															} */
														}, ],

												sortable : true,
												sortname : 'stime',
												sortorder : 'desc',
												pager : "#pager_list",
												caption : "告警详情列表",
												viewrecords : true
											});
						});
		$("#pager_list_center").css("width", "50%")

		// jqGrid 自动调整宽度
		$(window).bind('resize', function() {
			var width = $('.jqGrid_wrapper').width();
			$('#table_list').setGridWidth(width);

			var height = $(window).height();
			$("#table_list").setGridHeight(height - 282);
		});

		/* 查询按钮事件 */
		$("#h_search_btn").click(function() {
			var tabcnname = $("#tabcnname").val();
			var areaname = $("#areaname").val();
			var bizsys = $("#bizsys").val();
			var alarmdesc = $("#alarmdesc").val();

			var pk_scene_id = '${pk_scene_id}';
			var reserved1 = '${reserved1}';
			var alarmTime = '${alarmTime}';

			$("#table_list").jqGrid('setGridParam', {
				url : "${ctx }/platform/loadDataGrid",
				postData : {
					'tabcnname' : tabcnname,
					'areaname' : areaname,
					'bizsys' : bizsys,
					'alarmdesc' : alarmdesc,
					'pk_scene_id' : pk_scene_id,
					'reserved1' : reserved1,
					'alarmTime' : alarmTime
				}, //发送数据 
				page : 1
			}).trigger("reloadGrid"); //重新载入 
		});

		//绑定导出事件
		$("#h_export_btn").click(function() {
			$('#exportExcelWin').modal('show');
		});

		$("#submitExcel").click(function() {
			var tabcnname = $("#tabcnname").val();
			$("#tabcnname1").val(tabcnname);
			var areaname = $("#areaname").val();
			$("#areaname1").val(areaname);
			var bizsys = $("#bizsys").val();
			$("#bizsys1").val(bizsys);
			var alarmdesc = $("#alarmdesc").val();
			$("#alarmdesc1").val(alarmdesc);
			var v_export_name = $('#export_detail_name').val();
			if (v_export_name == "") {
				$("#export_detail_name")[0].focus();
				return false;
			}
			$("#outExecls").submit();
			//关闭窗口
			$('#exportExcelWin').modal('hide');
		});
		function dateFormat(times) {
			var date = new Date(times);
			var year = date.getFullYear();
			var month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1)
					: "0" + (date.getMonth() + 1);
			var day = date.getDate() >= 10 ? date.getDate() : "0"
					+ date.getDate();
			var h = date.getHours() >= 10 ? date.getHours() : "0"
					+ date.getHours();
			var m = date.getMinutes() >= 10 ? date.getMinutes() : "0"
					+ date.getMinutes();
			var s = date.getSeconds() >= 10 ? date.getSeconds() : "0"
					+ date.getSeconds();
			return "" + year + "-" + month + "-" + day + " " + h + ":" + m
					+ ":" + s;
		}
	</script>
</body>
</html>